import {ThoughtChain} from '@ant-design/x';
import type {ThoughtChainProps, ThoughtChainItem} from '@ant-design/x';

import {BranchesOutlined} from '@ant-design/icons';

import {ConfigProvider, theme, Typography,} from 'antd';

const {Paragraph} = Typography;
const updateItems: { title: string, time: string, content: string }[] = [
    
    {
        title: "更加人性化的对话管理",
        time: "2025年03月30日",
        content: "1.完成了本地端的对话管理功能\n" +
            "2.完成了预测和历史预测模块的编写"
    },
    {
        title: "AI对话模块编写与完善",
        time: "2025年03月26日-2025年3月28日",
        content: "1.完成了本地端的对话管理功能\n" +
            "2.实现了AI与上下文对话"
    },
    {
        title: "AI识别文本填表",
        time: "2025年03月25日",
        content: "1.使用更加简洁高效的方法来实现填表页面\n" +
            "2.实现了AI识别语音内容填表的功能"
    },
    {
        title: "重新构建AI默语解码并编写多个页面",
        time: "2025年03月22日",
        content: "1.使用更加便捷的 Ant Design X 构建AI默语解码页面\n" +
            "2.完成了开发团队与更新记录页面的编写\n" +
            "3.更换说明页面为 MarkdownRender 组件"
    },
    {
        title: "AI默语解码的构建",
        time: "2025年03月21日",
        content: "1.AI默语解码的页面初步构建\n" +
            "2.完成了/指令进行提示的相关操作\n" +
            "3.使用动态计算高度的方法设置页面的高度与适应不同设备\n" +
            "4.完成对话管理模块的UI实现"
    },
    {
        title: "UI框架设计与基本功实现",
        time: "2025年03月20日",
        content: "1.引入 semi design 并初步搭建一个UI框架并构思前端显示内容\n" +
            "2.完成左侧导航栏的功能\n" +
            "3.完成说明与开始预测页面的设计\n" +
            "4.完成语音识别功能的实现\n" +
            "5.完成暗色模式与浅色模式的动态切换"
    },

]
const generateItem = (title: string, time: string, content: string): ThoughtChainItem => {
    return {
        title: title,
        description: time,
        icon: <BranchesOutlined/>,
        content: (
            <Typography style={{width: '100%'}}>
                <Paragraph style={{width: '100%', whiteSpace: 'pre-wrap'}}>
                    {content}
                </Paragraph>
            </Typography>
        ),
        status: 'pending',
    }
}
const items: ThoughtChainProps['items'] = updateItems.map(value => generateItem(value.title, value.time, value.content))

const Update = (props:{
    isDarkMode:boolean
}) => {
    return (
        <ConfigProvider theme={props.isDarkMode ? {algorithm: theme.darkAlgorithm} : {}}>
            <ThoughtChain style={{
                margin: "20px 75px",
                width: "100%"
            }} items={items}/>
        </ConfigProvider>
    )
}
export default Update